<template>
	<view>
		<uni-forms :modelValue="form" ref="form" :rules="rules">
			<uni-forms-item name="reveiveUser" required label="收件人">
				<uni-easyinput v-model="form.reveiveUser" type="text" placeholder="请输入联系人" />
			</uni-forms-item>
			<uni-forms-item required label="手机号" name="receivePhone">
				<uni-easyinput type="text" v-model="form.receivePhone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item required name="msg" label="省市区">
				<uni-data-picker v-model="form.msg" :localdata="items"  popup-title="请选择省份" @change="onchange"
					@nodeclick="onnodeclick"></uni-data-picker>
					<view style="color: orange;">{{form.msg}}</view>
			</uni-forms-item>
			<uni-forms-item name="address" required label="详细地址" label-width="100">
				<uni-easyinput v-model="form.address" type="text" placeholder="请输入详细地址" />
			</uni-forms-item>
			<!-- <uni-forms-item name="companyAddress"  label="公司地址(选填)" label-width="80">
				<uni-easyinput v-model="form.companyAddress" type="text" placeholder="请输入公司地址" />
			</uni-forms-item> -->
		</uni-forms>
		<view class="body2" @click="submit">确定</view>
	</view>
</template>

<script>
		import {proCityList} from '@/util/city.js'
	export default {
		data() {
			return {
				areaDate: [],
				identification:0,
				items:proCityList ,
				formData: {
					age: ''
				},
				form: {
					reveiveUser: "",
					receivePhone: "",
					address: "",
					msg: "",
					companyAddress: ""
				},
				rules: {
					reveiveUser: {
						rules: [{
							required: true,
							errorMessage: '请输入联系人',
						}]
					},
					receivePhone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					msg: {
						rules: [{
							required: true,
							errorMessage: '请选择省市区',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入详细地址',
						}]
					}
				}
			}
		},
		onLoad() {
			console.log("缓存对象==========", uni.getStorageSync('formReceipt'))
			let formObject = uni.getStorageSync('formReceipt')
			this.form.reveiveUser = formObject.reveiveUser
			this.form.receivePhone = formObject.receivePhone
			this.form.address = formObject.address
			this.form.companyAddress = formObject.companyAddress
			this.form.msg = formObject.msg
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			handleClick() {
				console.log('uni-easyinput 被点击了');
				// 在这里执行点击后的逻辑
			},
			onchange(e) {
				const value = e.detail.value
				this.form.msg ="";
				for(var i=0;i<value.length;i++)
				{
					this.form.msg +=value[i].text
				}
			},
			onnodeclick(node) {},
			/**
			 * 表单提交
			 * @param {Object} event
			 */
			submit() {
				uni.showLoading()
				this.$refs.form.validate().then(res => {
					uni.hideLoading()
					console.log('表单数据信息：', res);
					//写入缓存
					uni.setStorageSync('formReceipt', this.form);
					uni.switchTab({
						url: "/pages/expressPages/expressPages"
					})
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>
<style lang="scss">
	.body2 {
		height: 100rpx;
		width: 700rpx;
		margin: 30rpx auto;
		border-radius: 30rpx;
		box-shadow: 5px 5px 10px rgb(227, 242, 204);
		background: rgb(204, 255, 1);
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		color: rgb(254, 112, 2);
	}
</style>